<template>
	<div class="wrap">
		<div class="essential-box">
			<div class="pay-title">结算方式及结算周期</div>
			<el-row :gutter="20" class="el-row">
				<el-col :span="12">
					<div class="grid-content">
						<div class="key">结算方式：</div>
						<div class="val">
							<template>
								<el-radio v-model="payInfo.is_prepay" :disabled="payPrepayDisabled" label="1">预付费</el-radio>
								<el-radio v-model="payInfo.is_prepay" :disabled="payPrepayDisabled" label="2"
									>后付费（按账单结算）</el-radio
								>
							</template>
						</div>
					</div>
				</el-col>
				<el-col :span="12" v-if="!paySaveShow && jurisdiction.settlementInfo == 1">
					<div class="grid-content pl_20">
						<el-link type="primary" @click="payEdit">编辑</el-link>
					</div>
				</el-col>
				<el-col :span="24" v-if="payInfo.is_prepay == 1">
					<div class="grid-content">
						<div class="key">温馨提示：</div>
						<div class="val">
							<span class="text-danger">一旦选择预付费，保存后不可更改，请仔细核对</span>
						</div>
					</div>
				</el-col>
				<el-col :span="24" v-if="payInfo.is_prepay == 2">
					<div class="grid-content">
						<div class="key">结算周期：</div>
						<div class="val">
							<template>
								<el-radio v-model="payInfo.settlement_cycle" :disabled="payDisabled" label="day">日</el-radio>
								<el-radio v-model="payInfo.settlement_cycle" :disabled="payDisabled" label="week">周</el-radio>
								<el-radio v-model="payInfo.settlement_cycle" :disabled="payDisabled" label="month">月</el-radio>
								<div style="float: right;" v-if="payInfo.settlement_cycle == 'day'">
									说明：每天12:00自动生成前一天的账单
								</div>
								<div style="float: right;" v-if="payInfo.settlement_cycle == 'week'">
									说明：每周一12:00自动确认上一周的账单
								</div>
								<div style="float: right;" v-if="payInfo.settlement_cycle == 'month'">
									说明：每月1号12:00自动确认上个月的账单
								</div>
							</template>
						</div>
					</div>
				</el-col>
			</el-row>
			<div class="pay-title">开票信息</div>
			<el-row :gutter="20" class="el-row">
				<el-col :span="24">
					<div class="grid-content">
						<div class="key">地址：</div>
						<div class="val">
							<el-input :disabled="payDisabled" v-model="payInfo.address"></el-input>
						</div>
					</div>
				</el-col>
				<el-col :span="24">
					<div class="grid-content">
						<div class="key">电话：</div>
						<div class="val">
							<el-input :disabled="payDisabled" v-model="payInfo.phone"></el-input>
						</div>
					</div>
				</el-col>
				<el-col :span="24">
					<div class="grid-content">
						<div class="key">开户行：</div>
						<div class="val">
							<el-input :disabled="payDisabled" v-model="payInfo.bank_branch_name"></el-input>
						</div>
					</div>
				</el-col>
				<el-col :span="24">
					<div class="grid-content">
						<div class="key">账号：</div>
						<div class="val">
							<el-input :disabled="payDisabled" v-model="payInfo.bank_card_id"></el-input>
						</div>
					</div>
				</el-col>
				<el-col :span="24">
					<div class="grid-content">
						<div class="key">发票类型：</div>
						<div class="val">
							<el-radio-group v-model="payInfo.type">
								<el-radio-button :disabled="payDisabled" label="1">增值税普通发票</el-radio-button>
								<el-radio-button :disabled="payDisabled" label="2">增值税专用发票</el-radio-button>
							</el-radio-group>
						</div>
					</div>
				</el-col>
				<el-col :span="24">
					<div class="grid-content">
						<div class="key">发票类型：</div>
						<div class="val">
							<template>
								<el-checkbox-group v-model="payInfo.scope">
									<el-checkbox :disabled="payDisabled" v-for="(item, i) in invoiceList" :key="i" :label="item.id">{{
										item.name
									}}</el-checkbox>
								</el-checkbox-group>
							</template>
						</div>
					</div>
				</el-col>
				<el-col :span="24" v-if="paySaveShow">
					<div class="edit-btn">
						<el-button round @click="payEditBack()">返回</el-button>
						<el-button type="primary" round @click="paySave()">保存</el-button>
					</div>
				</el-col>
			</el-row>
		</div>
	</div>
</template>

<script>
// 用工设置组件
import { fetchInvoiceList, settlementSave } from '@/api/shop.js'
import { cloneDeep } from 'lodash'
export default {
	name: 'useSignSetting',
	props: {
		shop_sn: {
			type: String,
			required: true
		},
		shop_info: {
			type: Object,
			required: true
		},
		jurisdiction: {
			type: Object,
			required: true
		}
	},
	data() {
		return {
			shopInfo: {},
			// 结算信息
			paySaveShow: false,
			payDisabled: true,
			payPrepayDisabled: true,
			invoiceList: [], //发票类目
			payInfo: {
				is_prepay: '',
				type: '',
				settlement_cycle: '',
				address: '',
				phone: '',
				scope: [],
				bank_branch_name: '',
				bank_card_id: ''
			}
		}
	},
	async mounted() {
		this.setValue()
		this.getinvoiceList() //发票类目
	},
	watch: {
		shop_info() {
			this.setValue()
		}
	},
	methods: {
		setValue() {
			this.shopInfo = this.shop_info
			// 结算信息
			this.payInfo.is_prepay = this.shop_info.is_prepay.toString()
			this.payInfo.settlement_cycle = this.shop_info.settlement_cycle
			this.payInfo.type = this.shop_info.invoice.type.toString()
			this.payInfo.scope = this.shop_info.invoice.scope
			this.payInfo.address = this.shop_info.invoice.address
			this.payInfo.phone = this.shop_info.invoice.phone
			this.payInfo.bank_branch_name = this.shop_info.invoice.bank_branch_name
			this.payInfo.bank_card_id = this.shop_info.invoice.bank_card_id
		},
		/*
			结算编辑
		*/
		payEdit() {
			const { is_prepay } = this.shopInfo
			this.paySaveShow = true
			this.payDisabled = false
			this.payPrepayDisabled = +is_prepay === 1 ? true : false
			this.payInfoBak = cloneDeep(this.payInfo)
		},

		payEditBack(type) {
			this.payDisabled = true
			this.paySaveShow = false
			this.payPrepayDisabled = true
			if (!type) this.payInfo = cloneDeep(this.payInfoBak)
		},

		async paySave() {
			try {
				await settlementSave({
					shop_sn: this.shop_sn,
					...this.payInfo,
					is_prepay: +this.payInfo.is_prepay,
					type: +this.payInfo.type,
					scope: this.payInfo.scope.join(',')
				})
				this.$message.success('保存成功')
				this.payEditBack('save')
			} catch (err) {
				console.log(err)
			}
		},

		// 获取发票类型
		async getinvoiceList() {
			try {
				let res = await fetchInvoiceList()
				this.invoiceList = res
			} catch (err) {
				console.log(err)
			}
		}
	}
}
</script>

<style scoped lang="scss">
.essential-box {
	margin-bottom: 30px;
}
.essential-box .grid-content {
	display: flex;
	height: auto;
	padding: 10px 0;
	height: 30px;
	line-height: 30px;
}
.essential-box .grid-content .key {
	width: 110px;
	font-size: 13px;
	color: #999999;
	text-align: right;
}
.essential-box .grid-content .val {
	font-size: 14px;
	padding-left: 20px;
	color: #222222;
}
.height-auto {
	height: auto !important;
}
.height-auto .val {
	display: flex;
}
.edit-btn {
	text-align: center;
	margin-top: 20px;
}

.pay-title {
	color: #222222;
	font-size: 14px;
	font-weight: bold;
	padding-bottom: 10px;
	border-bottom: 1px solid #ebebeb;
}
.el-row {
	padding-bottom: 50px;
}
.jurisdiction-set .val {
	display: block;
}
.jurisdiction-set .el-checkbox {
	width: 240px !important;
}
.gray {
	color: #999999;
	font-size: 14px;
}
</style>



// WEBPACK FOOTER //
// src/components/shop/UsePaySetting.vue